/**
 * 新鲜好物
 * **/
import './index.scss'
import LazyLoad from '../LazyLoad/index'
import { RightOutlined } from '@ant-design/icons'
import Skeleton from '../Skeleton/index'
import { getNew } from '../../api/home'
import { useEffect, useState } from 'react'
import { NavLink } from 'react-router-dom'
export default () => {
    /**
     * 初始面板
     * **/
    const defaultList = (
        <>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
        </>
    )
    /**
     * 商品列表
     * **/
    const [list, setList] = useState([])
    /**
     * 获取商品
     * **/
    const getList = async () => {
        try {
            const data = await getNew()
            setList(data)
        } catch (error) { }
    }
    useEffect(() => {
        getList()
    }, [])

    return (
        <div className="new-wrapper">
            <div className="top">
                <div className="left">
                    <h1>新鲜好物</h1>
                    <h3>新鲜出炉&ensp;品质靠谱</h3>
                </div>
                <span>查看全部&emsp;<RightOutlined /></span>
            </div>
            <LazyLoad load={getList}>
                <ul>
                    {
                        list.length ? list.map(item => (
                         <NavLink to={"product/"+item.id}>
                                <li>
                                <img src={item.picture} alt="" />
                                <p>{item.name}</p>
                                <p className='price'>￥{item.price}</p>
                            </li>
                         </NavLink>
                        )) : defaultList
                    }

                </ul>
            </LazyLoad>
        </div>
    )
}